<template>
    <div class="wrap bgw">
        <div class="top">
            <img class="ffl" src="@/assets/image/Furtherconsultation_Defaulthead@2x.png" alt="">
            <p>
                提现账户： <span>用户1！！！！</span>
            </p>
            <div class="fr">账户余额：<span>1000</span></div>
        </div>
        <div class="box">
           <div class="list">
                <span  @click="moneyState = i" :class="{moneyActive : moneyState == i}" v-for="(v,i) in moneyList" :key="i">￥ {{v}}</span>
           </div>
           <div class="list">
               <span  @click="moneyState = -1" :class="{moneyActive : moneyState == -1}">其他金额</span>
           </div>
           <div class="type">
              <div class="fl">提现至:</div>
               <div @click="type =1" :class="{typeActive : type == 1}" class="fl"><span></span><img src="@/assets/image/payment_weixin_img@2x.png" alt=""></div>
               <div  @click="type =2" :class="{typeActive : type == 2}" class="fl"><span></span><img src="@/assets/image/payment_zhifubao_img@2x.png" alt=""></div>
               <div  @click="type =3" :class="{typeActive : type == 3}" class="fl"><span></span><img src="@/assets/image/payment_yinlian_img@2x.png" alt=""></div>
           </div>
           <div class="type moneySum">
             <div class="fl fll">提现金额</div>
             <div class="fl flll">11.00 元</div>
           </div>
           <button @click="sendCash">确认提现</button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            moneyState:-2,
            moneyList:[10,20,50,100,300],
            type:-1,
        }
    },
    methods: {
        // 向后台返回发送金额
        sendCash() {
            this.$emit("changeState", 0)
        }
    }
}
</script>
<style lang="less" scoped>
button{
    margin-top: 20px;
        width: 130px;
        height: 46px;
        font-size: 18px;
}
.moneySum{
    .fll{
       
    }
    .flll{
        color: #FF0303;
         padding-left: 0!important;
    }
}
.typeActive{
    span{
        border:1px solid  #4EEEC8!important;
        background: #4EEEC8;
    }
}
.moneyActive{
        border:2px solid  #4EEEC8!important;
}
.type{
    margin-top: 20px;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    text-align: left;
    div:nth-of-type(1){
        margin-left: 0;
        width: 80px;
        padding-left: 0;
    }
    >div{
        position: relative;
        padding-left: 40px;
        margin-right: 20px;
        // margin-right: 40px; border:1px solid red; 
    }
    span{
        position: absolute;
        top: 50%;
        left: 0;
        width:18px;
        height:18px;
        border:1px solid rgba(230,230,230,1);
        border-radius:50%;
        transform: translate(0,-50%);
    }
    img{
       vertical-align: middle;
    }
}
.list{
    margin-top: 30px;
    display: flex;
    justify-content:space-between;
    span{
        width: 158px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        display: inline-block;
        border:2px solid #BFBFBF; 
    }
}
.box{
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 40px;
}
.top{
    height: 182px;
    line-height: 182px;
    padding-left: 50px;
    padding-right: 50px;
    font-size: 20px;
    border-bottom: 1px solid #E6E6E6;
    img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        vertical-align:middle;
    }
    p{
        display: inline-block;
        margin-left: 36px;
    }
    span{
        color: #4EEEC8;
    }
}
</style>